import { useColor } from "@/hooks/color";
import { AppDispatch, RootState } from "@/stores";
import { listTaskItem, TaskSelect } from "@/stores/tasks/item";
import React, { useCallback, useState } from "react";
import { Colors, View } from "react-native-ui-lib";
import { useDispatch, useSelector } from "react-redux";
import FoundList from "@/components/base/found.list";
import { useTranslation } from "react-i18next";
import { useFocusEffect } from "expo-router";
import { ScrollView } from "react-native";

import TasksShowItems from "./tasks.show.items";
interface ITasksShowProps {}

const TasksShow: React.FC<ITasksShowProps> = () => {
  const items = useSelector<RootState, Array<TaskSelect>>(state => state.item);

  // useFocusEffect(
  // useCallback(() => {
  // setPageSize(10);
  // setPage(1);
  // }, [action, page, pageSize])
  // );

  return (
    <View flex centerH paddingV-4 className='flex w-full'>
      <FoundList
        hidden={items.length > 0}
        icon={"file-tray-full-outline"}
        iconSize={150}
        iconColor={Colors.getColorTint(useColor().color.search, 50)}
        title={useTranslation().t("2010")}
        titleSize={30}
        titleColor={Colors.getColorTint(useColor().color.search, 50)}
      />
      <ScrollView
        className='gap-3 my-1'
        style={{ width: "100%", display: items.length > 0 ? "flex" : "none" }}
        showsVerticalScrollIndicator={false}
        showsHorizontalScrollIndicator={false}>
        {items.map((item, index) => (
          <TasksShowItems key={index} item={item} />
        ))}
      </ScrollView>
    </View>
  );
};

export default TasksShow;
